<template>
	<view class="config">
		<view class="item">
			<view class="title">
				入职时间:
			</view>
			<view class="select_picker">
				<picker mode="date" :value="datas.entryTime" :start="startDate" :end="endDate"
					@change="entryTimeChange">
					<view class="item_data">{{datas.entryTime}}</view>
				</picker>
			</view>
		</view>
		<view class="tips">上午时段</view>
		<view class="item">
			<view class="title">
				上班时间：
			</view>
			<view class="select_picker">
				<picker mode="time" :value="datas.workTime.time1" start="00:00" end="23:59" @change="workTimeChange1">
					<view class="item_data">{{datas.workTime.time1}}</view>
				</picker>
			</view>
		</view>
		<view class="item">
			<view class="title">
				下班时间：
			</view>
			<view class="select_picker">
				<picker mode="time" :value="datas.workTime.time2" start="00:00" end="23:59" @change="workTimeChange2">
					<view class="item_data">{{datas.workTime.time2}}</view>
				</picker>
			</view>
		</view>
		<view class="tips">下午时段</view>
		<view class="item">
			<view class="title">
				上班时间：
			</view>
			<view class="select_picker">
				<picker mode="time" :value="datas.workTime.time3" start="00:00" end="23:59" @change="workTimeChange3">
					<view class="item_data">{{datas.workTime.time3}}</view>
				</picker>
			</view>
		</view>
		<view class="item">
			<view class="title">
				下班时间：
			</view>
			<view class="select_picker">
				<picker mode="time" :value="datas.workTime.time4" start="00:00" end="23:59" @change="workTimeChange4">
					<view class="item_data">{{datas.workTime.time4}}</view>
				</picker>
			</view>
		</view>
		<view class="item">
			<view class="title">
				月薪:
			</view>
			<view class="select_picker">
				<input v-model="datas.wages" class="uni-input"  placeholder=" " />
			</view>
		</view>
		<view class="item">
			<view class="title">
				发薪日:
			</view>
			<view class="select_picker">
				<picker :range="dateList" :value="payTimeIndex" @change="payTimeChange">
					<view class="item_data">{{dateList[payTimeIndex]}}</view>
				</picker>
			</view>
		</view>
		<view class="item">
			<view class="title">
				性别:
			</view>
			<view class="select_picker">
				<picker :range="genderList" range-key="name" :value="genderIndex" @change="genderChange"> 
					<view class="item_data">{{genderList[genderIndex].name}}</view>
				</picker>
			</view>
		</view>
		<view class="item">
			<view class="title">
				出生日期:
			</view>
			<view class="select_picker">
				<picker mode="date" :value="datas.birthDate" start="1960/01/01" end="2060/12/31"
					@change="birthChange">
					<view class="item_data">{{datas.birthDate}}</view>
				</picker>
			</view>
		</view>
		<view class="savebtn" @click="handleSubmit">保存</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '2024-05-06',
				startDate: '1960-01-01',
				endDate: '2060-12-31',
				datas: {
					wages: null, //薪资
					entryTime: this.getCurrentDate(), //入职时间
					workTime: {
						time1: '9:00',
						time2: '12:00',
						time3: '14:00',
						time4: '18:00',
					}, //工资时间
					payTime: 1, //发薪日
					birthDate: '1990-01-01',
					gender: 1
				},
				dateList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
					26, 27, 28, 29, 30, 31
				],
				genderList: [{
					name: '男',
					value: 1
				}, {
					name: '女',
					value: 2
				}],
				payTimeIndex: 0,
				genderIndex: 0,
			}
		},
		onLoad() {
			if(uni.getStorageSync('fishUserInfo')){
				this.datas = JSON.parse(uni.getStorageSync('fishUserInfo'))
				console.log(this.datas)
				this.payTimeIndex = Number(this.datas.payTime)-1
				this.genderIndex = Number(this.datas.gender)-1
			}
		},
		methods: {
			bindDateChange() {

			},
			getCurrentDate() {
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
			},
			entryTimeChange(e) {
				this.datas.entryTime = e.detail.value
			},
			birthChange(e){
				this.datas.birthDate = e.detail.value
			},
			genderChange(e){
				this.genderIndex = Number(e.detail.value)
				this.datas.gender = this.genderIndex==0?1:2
			},
			payTimeChange(e){
				this.payTimeIndex = Number(e.detail.value)
				this.datas.payTime = this.dateList[this.payTimeIndex+1]
			},
			handleSubmit(){
				if(!this.datas.wages){
					uni.showToast({
						title:'请输入月薪',
						icon:'none'
					})
					return
				}
				uni.setStorageSync('fishUserInfo',JSON.stringify(this.datas))
				uni.showToast({
					title:'保存成功',
					icon:'none'
				})
				setTimeout(()=>{
					uni.navigateBack({
					  delta: 1
					})
				},1500)
				
			},
			workTimeChange1(e){
				this.datas.workTime.time1 = e.detail.value
			},
			workTimeChange2(e){
				this.datas.workTime.time2 = e.detail.value
			},
			workTimeChange3(e){
				this.datas.workTime.time3 = e.detail.value
			},
			workTimeChange4(e){
				this.datas.workTime.time4 = e.detail.value
			},
		}
	}
</script>

<style lang="less">
	.config {
		background: #fff9f2;
		padding: 20px;
		height: 100vh;

		.tips {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.title {
				font-size: 30rpx;
				color: #566;
				margin-right: 10rpx;
				width: 80px;
			}

			.select_picker {
				background: #fff;
				border-radius: 5px;
				padding: 10px;
				flex: 1;

				.item_data {
					color: #333;
				}
			}
		}
	}

	.savebtn {
		width: 98%;
		margin: auto;
		text-align: center;
		background: #ffa86a;
		color: #fff;
		border-radius: 5px;
		font-size: 30rpx;
		padding: 18rpx 0;
		margin-top: 30px;
	}
</style>